<%- include('head') -%>
  <h1>home页</h1>
  <button id="add">插入新的学生</button>
  <ul>
    <% if(stus.length === 0){ %>
    <li>暂无学生</li>
    <%}%>

    <% for(var i=0;i<stus.length;i++){ %>
      <li>
        <h4>学生姓名:<%= stus[i].stuName %>
        </h4>
        <p>学生年龄:<%= stus[i].stuAge %>
        </p>
        <p>学生性别: <%= stus[i].stuGender===1?'男':'女' %>
        </p>
        <button data-id="<%= stus[i]._id %>" class="del">删除学生</button>
        <button class="update" data-id="<%= stus[i]._id %>">修改学生年龄</button>
      </li>
      <% } %>
  </ul>
  <script src="/static/js/jquery-3.6.0.js"></script>
  <script>
    // 新增学生
    $('#add').click(function () {
      $.ajax({
        url: '/add',
        type: 'post',
        data: {
          stuName: '学生n',
          stuAge: 100,
          stuGender: 0
        },
        success: function (res) {
          if (res.code === 0) {
            // 插入成功
            alert(res.msg);
            // 刷新页面
            history.go(0)
          }
        }
      })
    })

    // 删除学生
    $(".del").click(function () {
      if (confirm("此操作会彻底删除该数据确定继续吗？")) {
        $.ajax({
          url: '/delStu',
          data: {
            id: this.dataset.id
          },
          success: function (res) {
            if (res.code === 0) {
              alert(res.msg);
              history.go(0)
            } else {
              alert(res.msg);
            }
          }
        })
      }
    })

    // 修改学生信息

    $('.update').click(function(){
      $.ajax({
        url: '/updateStu',
        type: 'post',
        data: {
          id: this.dataset.id,
          stuAge: 200
        },
        success: function(res){
          if(res.code === 0) {
            alert(res.msg);
            history.go(0)
          }
        }
      })
    })
  </script>
  </body>

  </html>